<template>
<div class="recommend-div">
    <div class="recommend-title">周末去哪儿</div>
    <ul>
        <!-- border-bottom一像素边框解决方案 -->
        <li class="item border-bottom" v-for="(item,index) of this.list" :key=index>
            <img class="item-img" :src='item.imgUrl' alt="">
            <div class="item-info">
                <p class="item-title">{{item.title}}</p>
                <p class="item-desc">{{item.desc}}</p>
            </div>
        </li>
    </ul>
</div>
</template>
<script>
export default {
  name: 'HomeWeekend',
  props: {
    list: Array
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.recommend-div
    margin-top : .0rem
    .recommend-title
        color : $titleColor
        font-size .3rem
        background : #eee
        text-indent .1rem
        line-height .8rem
    .item
        height : 4.0rem
        overflow hidden
        .item-img
            height 2.8rem
            width 100%
        .item-info
            flex 1 //自动撑开宽度
            padding .1rem
            min-width 0 //宽度超出设置
            .item-title
                color : black
                line-height : .5rem
                font-size .35rem
                ellipsis() //宽度超过之后。。。
            .item-desc
                color : #aaa
                line-height : .4rem
                font-size .30rem
                margin-top .05rem
                ellipsis() //宽度超过之后。。。
</style>
